<template>
    <el-card style="max-width: 480px ;  width: 480px; margin: 250px auto;padding: 18px;">


        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="账号" prop="accountName">
                <el-input v-model="ruleForm.accountName" />
            </el-form-item>

            <el-form-item label="密码" prop="pwd">
                <el-input show-password v-model="ruleForm.pwd" />
            </el-form-item>
            <el-form-item label="验证码" prop="sCode">
                <el-input v-model="ruleForm.sCode" style="width: 150px;" />
                <el-tag style="margin: 0 10px;">{{ ruleForm.kCode }}</el-tag>
                <el-button type="primary" @click="getKCode">看不清,换一张</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    登录
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>


    </el-card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import router from '@/router';
import { useCounterStore } from '@/stores/counter';
import http from '@/http/axiosHelper';
const pinia = useCounterStore()


const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({//从 swagger api文档 粘贴
    "accountName": "",
    "pwd": "",
    "fingerPoint": navigator.userAgent,
    "sCode": "",//用户输入的验证码,
    'kCode': '' //用户看到的验证码
})


const rules = reactive<FormRules>({
    accountName: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 2, max: 15, message: '账号长度应为 2-15', trigger: 'blur' },
    ], pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 2, max: 15, message: '密码长度应为 2-15', trigger: 'blur' },
    ]
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (ruleForm.sCode != ruleForm.kCode) {
        ElMessage.error("请输入正确的验证码!");
        getKCode();
        return;
    }

    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post('http://localhost:5141/api/Account/Login', ruleForm).then(res => {
                if (res.data.code == 200) {
                    ElMessage.success(res.data.msg);

                    //把用户登录信息存起来
                    pinia.loginDto.accountName = res.data.data.accountName
                    pinia.loginDto.jwtToken = res.data.data.jwtToken
                    pinia.loginDto.realName = res.data.data.realName
                    pinia.loginDto.refreshToken = res.data.data.refreshToken
                    pinia.loginDto.roleName = res.data.data.roleName

                    
                    //前端调用日志
                    http.post('/T6/Log/CreateLog', {
                        "logDes": res.data.data.realName+"登录成功!",
                        "creator": res.data.data.accountName
                    })

                    router.push('main'); //跳转
                } else {
                    ElMessage.error(res.data.msg);
                }

            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const getKCode = () => {
    //随机生成4个字符
    var allStr = 'qwertyuipasdfghjkzxcvbnmQWERTYUIPASDFGHJKZXCVBNM123456789';
    ruleForm.kCode = ''
    for (let i = 0; i < 4; i++) {
        var index = Math.floor(Math.random() * allStr.length)
        var code = allStr[index]
        ruleForm.kCode += code
    }
}

onMounted(() => {
    getKCode()
})

</script>
